I have a dozen images which I want to rotate using css animation opacity fade in fade out. I want to import the images into the tws so that they are not that messy.
The easiest way is that I can give the [img[myimage01]] an id. There are quite a dozen css samples out there, as long as I can give each of my images a different id.
I think I can use the following
<div class="fadein">
<span id="img1">[img[myimage01]]</span>
<span id="img2">[img[myimage02]]</span>
<span id="img3">[img[myimage03]]</span>
</div>
with css like this
.fadein #img1 {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
.fadein #img2 {
animation-delay: -4s;
-webkit-animation-delay: -4s;
}
.fadein #img3 {
animation-delay: -2s;
-webkit-animation-delay: -2s;
}
But I am not sure. I tried [img[myimage01] id="img01"] and no doubt it does not work. Is there anything easy I missed out?
I also want to put the images link into an array so that I can push and pop as I see fit, changing the images on the fly. I thought about using url element in the css like url(
img[image04) but I have no idea how to put it together with an array script. Anyone?
Comments
You can create a CSS selector based on the data-passage attribute like so:
I did check the markup, and gave up after seeing the base64-random-number-string at src. Never know that I can specify the attributes in css. I have learned something new today thanks to you.
DIRECT: Adding a class to the image element itself
A good fit for the <img> markup. For example, and continuing with your shown image passages: And the relevant styles:
INDIRECT: Adding a class to the image's parent element
A good fit for the [img[]] markup. For example, and continuing with your shown image passages: And the relevant styles:
are the same?
So I can use <img> instead of
Yes. Though, as seen in the examples, you must use the data-passage attribute to refer to the image passage, rather than the src attribute one would normally use.
SEE: Markup Language > HTML Attributes for more details on the data-passage attribute.